<template>
  <view class="app-container bill-list-page">
    <mescroll-body @init="mescrollInit" @down="downCallback" @up="upCallback" class="list-wrapper">
      <view class="bill-list">
        <view class="bill-item" v-for="(item,index) in list" :key="item.id">
          <hxk-card>
            <template v-slot:header>
              <view class="header">
                <view class="title">
                  <dict-tag :options="dict.type.bill_type" :value="item.billType"/>
                </view>
                <view class="status">
                  <dict-tag :options="dict.type.pay_state" :value="item.payState"/>
                </view>
              </view>
            </template>
            <template v-slot:body>
              <view class="body">
                <view class="cycle">
                  账单周期：{{ formatDateString('yyyy-MM-dd HH:mm:ss', item.billStartTime, 'yyyy-MM-dd') }} ~
                  {{ formatDateString('yyyy-MM-dd HH:mm:ss', item.billEndTime, 'yyyy-MM-dd') }}
                </view>
                <view class="deadline-date">最晚付款日期：{{ truncateDate(item.latestPayTime) }}</view>
                <view class="bill-amount">金额：¥{{ item.cost }}</view>
              </view>
            </template>
            <template v-slot:footer>
              <view class="footer">
                <view class="btn" @click="viewDetail(list[index].billId)">详情</view>
                <!--1: 待付款 3: 逾期 -->
                <view v-if="item.payState === '1' || item.payState === '3'" class="btn" @click="handlePay(list[index].billId)">付款</view>
              </view>
            </template>
          </hxk-card>
        </view>
      </view>
    </mescroll-body>
  </view>
</template>

<script>
import HxkCard from "@/components/hxk-card/index";
import {formatDateString, goto} from "@/utils/common";
import {billList} from "@/api/manager/order";
import storage from "@/utils/storage";
import constant from "@/utils/constant";
import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins";
import {truncateDate} from "../../../utils/common";

export default {
  mixins: [MescrollMixin],
  dicts: ['bill_type', 'pay_state'],
  components: {HxkCard},
  data() {
    return {
      list: []
    };
  },
  methods: {
    truncateDate,
    formatDateString,
    upCallback(page) {
      // 为了兼容后台的分页参数
      const orderId = storage.get(constant.room).orderId;
      const data = {
        "pageNum": page.num,
        "pageSize": page.size,
        "orderId": orderId
      }
      this.queryParams = {
        ...this.queryParams,
        ...data
      }
      billList(this.queryParams).then(res => {
        this.mescroll.endBySize(res.rows.length, res.total)
        if (page.num === 1) this.list = [];
        this.list = this.list.concat(res.rows);
      }).catch(() => {
        this.mescroll.endErr();
      })
    },
    goto,
    getList() {
      const orderId = storage.get(constant.room).orderId;
      billList(orderId).then(res => {
        this.list = res.data;
      })
    },
    // 支付
    handlePay(billId) {
      this.$tab.navigateTo('/pages/manager/bill/bill-pay?id=' + billId)
    },
    // 查看详情
    viewDetail(billId) {
      this.$tab.navigateTo('/pages/manager/bill/detail?id=' + billId)
    }
  }
}
</script>

<style lang="scss" scoped>
.bill-list-page {
  .bill-list {
    padding: 20rpx;

    .bill-item {
      margin-bottom: 20rpx;

      .header {
        display: flex;
        justify-content: space-between;

        .title {
          font-size: 32rpx;
          color: #111;
        }

        .status {
          font-size: 28rpx;
          //color: #f00;
        }
      }

      .body {
        .cycle {
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }

        .deadline-date {
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }

        .bill-amount {
          // 居右显示
          text-align: right;
          font-size: 28rpx;
          color: #666;
          margin-top: 20rpx;
        }
      }

      .footer {
        display: flex;
        // 居右显示
        justify-content: flex-end;


        .btn {
          padding: 10rpx 20rpx;
          font-size: 28rpx;
        }
      }

    }
  }

}

</style>